<template>
  <canvas
    ref="elCanvas"
    :height="detail.style.position.h"
    :width="detail.style.position.w"
  >
    Your browser does not support the HTML5 canvas tag.
  </canvas>
</template>

<script>
  import canvasView from './ViewCanvas'

  export default {
    name: 'ViewTriangle',
    extends: canvasView,
    mounted() {
      this.onResize()
    },
    methods: {
      drapTriangle(x1, y1, x2, y2, x3, y3, color, type) {
        var el = this.$refs.elCanvas
        var ctx = el.getContext('2d')
        ctx.beginPath()
        ctx.moveTo(x1, y1)
        ctx.lineTo(x2, y2)
        ctx.lineTo(x3, y3)
        ctx[type + 'Style'] = color
        ctx.closePath()
        ctx[type]()
      },
      onResize() {
        var w = this.detail.style.position.w
        var h = this.detail.style.position.h
        var el = this.$refs.elCanvas
        var ctx = el.getContext('2d')
        ctx.clearRect(0, 0, w, h)
        var x1 = w / 2,
          y1 = 0,
          x2 = 0,
          y2 = h,
          x3 = w,
          y3 = h
        var color = this.getForeColor()
        this.drapTriangle(x1, y1, x2, y2, x3, y3, color, 'fill')
      },
    },
  }
</script>
